<template>
	<view>
		<tn-nav-bar :isBack='true' :backTitle='" "' bottomShadow :alpha="alpha">我的收益</tn-nav-bar>
		<image src="/static/product/topbg.png" class="topbg" mode=""></image>
		<loading v-if="loading"></loading>
		<view :style="{paddingTop:'calc('+vuex_custom_bar_height+'px + 50rpx)'}" class="con" v-else>
			<view class="item" v-for="(item,index) in list" :key="index">
				<image src="/static/my/sybg.png" class="item__bg" mode=""></image>
				<view class="item__box">
					<view class="item__title">
						<view class="tn-flex tn-flex-col-center" style="font-weight: bold;">
							<image src="/static/my/syicon.png" class="item__title__icon" mode=""></image>
							{{item.name}}
						</view>
						<view class="tn-flex tn-flex-col-center" @click="to('/pages/my/withdrawal')">
							<image src="/static/my/txicon.png" class="item__title__txicon" mode=""></image>
							提现
						</view>
					</view>
					<view class="item__bottom">
						<view class="item__bottom__item">
							<view class="item__value">
								{{item.ze}}
							</view>
							<view class="item__text">
								奖励总额(元)
							</view>
						</view>
						<view class="item__bottom__item">
							<view class="item__value">
								{{item.ktx}}
							</view>
							<view class="item__text">
								最近收益(元)
							</view>
						</view>
						<view class="">
							<tn-button @click="to('/pages/profit/detailed?type='+item.type+'&name='+item.name)" fontColor="#FFFFFF" shape='round' width='158rpx' height='64rpx' :fontSize='24' backgroundColor="tn-bg-lv">查看明细</tn-button>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				alpha:true,
				list:[
					{
						name:'套餐收益',ze:0,ktx:0,type:1
					},
					{
						name:'返佣收益',ze:0,ktx:0,type:2
					},
					{
						name:'团队津贴',ze:0,ktx:0,type:3
					}
				],
				loading:true
			};
		},
		onLoad() {
			user.myIncome().then(res=>{
				if(res.data.code==1){
					let data=res.data.data
					this.list[0].ze=data.returnTaoCanTotalMoney
					this.list[0].ktx=data.returnTaoCanLastMoney
					this.list[1].ze=data.returnTotalMoney
					this.list[1].ktx=data.returnLastMoney
					this.list[2].ze=data.returnTotalTeamMoney
					this.list[2].ktx=data.returnLastTeamMoney
					this.loading=false
				}
			})
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F4F4F4;
	}
	.con {
		padding: 30rpx;
		position: relative;
	}
	.item{
		width: 690rpx;
		height: 249rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;
		&__bg{
			width: 690rpx;
			height: 249rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		&__box{
			position: relative;
			
		}
		&__title{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #1E1E1E;
			line-height: 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 40rpx 55rpx 32rpx;
			&__icon{
				width: 27rpx;
				height: 31rpx;
				margin-right: 13rpx;
			}
			&__txicon{
				width: 32rpx;
				height: 31rpx;
				margin-right: 13rpx;
			}
		}
		&__bottom{
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			padding: 0 30rpx;
			&__item{
				width: 33%;
				
			}
		}
		&__value{
			font-family: DINNextLTPro-Bold;
			font-weight: bold;
			font-size: 48rpx;
			color: #1E1E1E;
			line-height: 34rpx;
		}
		&__text{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #95979B;
			line-height: 23rpx;
			margin-top: 16rpx;
		}
	}
</style>